<template>
  <div id="main">
    <el-divider id="convas"></el-divider>
    <!-- 绘制 14 * 14 方格 -->
    <div class="chessBox">
      <canvas class="canvas" width="700" height="700"></canvas>
      <!-- 绘制最下面的方格 并添加事件 -->
      <div v-for="(colI, index) in col" :key="index" @mouseenter="getResult(numsArr[index])">
        <div class="numBox" :style="{ 'left': (index * 50) + 'px' }">{{ numsArr[index] }}</div>
      </div>
      <!-- 随机生成一个数字 -->
      <div class="randomNum" :style="{ 'top': gridSize * numTop + 'px', 'left': gridSize * numLeft + 'px' }" v-show="isShowNum">
        {{ resultArr[resultIndex] }}</div>
      <!-- 右侧的操作 -->
      <div class="successBox">
        <!-- 暂停 -->
        <div class="item">
          <el-button type="primary" @click="stopChange">暂停</el-button>
        </div>
        <!-- 向左 向右 -->
        <div class="item">
          <el-button type="primary" icon="el-icon-arrow-left" @click="leftChange">左</el-button>
          <el-button type="primary" @click="rightChange">右<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </div>
        <!-- 快速下降 -->
        <div class="item">
          <el-button type="primary">快速下降</el-button>
        </div>
        <!-- 正确的次数 -->
        <div class="item">
          <div class="rightBox">正确</div>
          <div class="rightNum">{{ rightNum }}</div>
        </div>
        <!-- 错误的次数 -->
        <div class="item">
          <div class="errorBox">错误</div>
          <div class="errorNum">{{ errorNum }}</div>
        </div>
      </div>
      <!-- 游戏结束 -->
      <div class="overDiv" v-show="gameOver">游戏结束！</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridSize: 50, // 定义变量保存小方格的尺寸
      row: 0, // 行数
      col: 0, // 列数
      testResult: [], // 需要检测的内容 可以自己设置 也可以 prop 形式传入
      numsArr: [], // 最下面 数字
      resultArr: [], // 最下面 数字 对应的结果

      randomBoxArr: [], // 根据 this.resultArr 得到 方块出现的位置 在中间的位置

      resultIndex: -1, // 得到 resultArr 随意一个数字 的下标值
      resultHeight: [], // 计算 需要下降的高度的数值  高度 = num * 50

      isShowNum: true,
      numObj: null, // 添加事件
      numTop: 0, // 方块距离 top 距离
      numLeft: 0, // 方块距离 left 距离

      urlArr: [
        // { url: require('@/components/judgeDemo/images/book.png') },
      ],

      errorNum: 0, // 错误的次数
      rightNum: 0, // 正确的次数

      gameOver: false, // 游戏结束



      ydHeight: 500,
    }
  },
  watch: {
    numTop(num) {
      // console.log('numTop----watch', num, this.numLeft)
      if (this.numObj && (this.numTop > this.resultHeight[this.numLeft] || this.numTop == this.resultHeight[this.numLeft])) {
        console.log('this.numObj----------watch')
        clearInterval(this.numObj)
        this.numObj = null
      }
    },
    numObj(val) {
      // console.log('numObj----watch', this.numObj)
      console.log('结果-----', this.numTop, this.numLeft, this.resultIndex)
      // 计算是否正确 正确不加圆圈 错误在该位置放置圆圈
      console.log('结果-----', this.numsArr[this.resultIndex], this.resultArr[this.resultIndex])
      if (this.numObj == null) {
        setTimeout(() => {
          if (this.numLeft != this.resultIndex) {
            console.log('结果-----', this.numTop, this.numLeft)
            this.isShowNum = false // 移动的方块消失
            let chessBox = document.getElementsByClassName('chessBox')[0]
            let resultDiv = document.createElement('div')
            console.log('numObj----watch', resultDiv)
            chessBox.appendChild(resultDiv)
            resultDiv.innerText = 'X'
            resultDiv.className = 'resultDiv'
            resultDiv.style.width = this.gridSize + 'px'
            resultDiv.style.height = this.gridSize + 'px'
            resultDiv.style.borderRadius = (this.gridSize / 2) + 'px'
            resultDiv.style.background = 'red'
            resultDiv.style.color = '#fff'
            resultDiv.style.fontSize = '30px'
            resultDiv.style.lineHeight = '50px'
            resultDiv.style.textAlign = 'center'

            // var iconstring = 'url(\'' + this.urlArr[0] + '\')';

            // url('@/components/judgeDemo/images/book.png');

            // 'url(@/components/tetris/images/error.png)'
            // '@/components/game/tetris/images/error.png');
            resultDiv.style.backgroundImage = "'url(' + ./images/error.png + ')'"
            resultDiv.style.position = 'absolute'
            resultDiv.style.top = (this.numTop * this.gridSize) + 'px'
            resultDiv.style.left = (this.numLeft * this.gridSize) + 'px'
            // 对应的位置高度减一
            let resultNum = this.resultHeight[this.numLeft]
            this.resultHeight[this.numLeft] = resultNum - 1
            // 计算错误的次数
            this.errorNum = this.errorNum + 1
          } else {
            this.isShowNum = false // 移动的方块消失
            this.rightNum = this.rightNum + 1 // 计算正确的次数
          }
        }, 2000)
        console.log('结果-----', this.resultHeight, this.col / 2 - 1)
        let resultError = this.resultHeight.filter(item => { return item <= (this.col / 2 - 1) })
        console.log('结果-----', resultError)
        if (resultError.length) {
          this.gameOver = true
          console.log('游戏结束-------------')
          this.numObj == null
          return
        }
        setTimeout(() => {
          this.resultIndex = -1
          this.numTop = 0
          this.getResultBox()
        }, 2000)

      }

    }
  },
  mounted() {
    this.getTEBox() // 绘制 14 * 14 方格
    this.testResult = this.getTestResult(this.col, [1, 50]) // 得到 n 随机数 + 对应的结果
    this.getNumResult() // this.testResult 得到对应的数字数组 + 结果数组
    console.log('下部的随机数 + 结果---数组', this.testResult, this.numsArr, this.resultArr)
    this.resultHeight.length = this.col
    this.resultHeight.fill(this.row - 2) // 记录 方块需要下降的高度
    console.log('YYYYYYYY', this.col, this.resultHeight)
    this.randomBoxArr = this.getRandomArr() // 根据 this.resultArr 得到 方块出现的位置 在中间的位置
    // 随机生成一个随机数的方块
    this.getResultBox()



  },
  beforeDestroy() {
    clearInterval(this.numObj)
    this.numObj = null
  },
  methods: {
    // 绘制 14 * 14 方格
    getTEBox() {
      let oCanvas = document.getElementsByClassName('canvas')[0] // 拿到canvas
      let oCtx = oCanvas.getContext('2d') // 从canvas中拿到绘图工具
      let gridSize = this.gridSize // 定义变量保存小方格的尺寸
      // 拿到canvas的宽高
      let canvasWidth = oCtx.canvas.width
      let canvasHeight = oCtx.canvas.height
      // 计算在垂直方向和水平方向可以绘制多少条横线
      this.row = Math.floor(canvasHeight / gridSize)
      this.col = Math.floor(canvasWidth / gridSize)
      // 绘制水平线
      for (let i = 0; i <= (this.row - 1); i++) {
        oCtx.beginPath()
        oCtx.moveTo(0, i * gridSize - 0.5)
        oCtx.lineTo(canvasWidth, i * gridSize - 0.5)
        oCtx.strokeStyle = '#C89870'
        oCtx.stroke()
      }
      // 绘制竖直线
      for (let i = 0; i <= (this.col - 1); i++) {
        oCtx.beginPath()
        oCtx.moveTo(i * gridSize - 0.5, 0)
        oCtx.lineTo(i * gridSize - 0.5, canvasHeight)
        oCtx.strokeStyle = '#C89870'
        oCtx.stroke()
      }
      // 绘制水平线 - 警戒线
      oCtx.beginPath()
      oCtx.moveTo(0, canvasHeight / 2)
      oCtx.lineTo(canvasWidth, canvasHeight / 2)
      oCtx.strokeStyle = 'red'
      oCtx.stroke()
    },
    // 得到 n 随机数 + 对应的结果
    getTestResult(n, [min, max]) {
      let nums = []
      for (let i = 0; i < n; i++) { nums.push(Math.floor(Math.random() * (max - min) + min + 1)) }
      let numsResult = []
      nums.forEach(item => { numsResult.push({ name: item, value: 100 - item }) })
      return numsResult
    },
    // this.testResult 得到对应的数字数组 + 结果数组
    getNumResult() {
      this.testResult.forEach(item => {
        this.numsArr.push(item.name)
        this.resultArr.push(item.value)
      })
    },
    // 根据 this.resultArr 得到 方块出现的位置 在中间的位置
    getRandomArr() {
      let randomArr = []
      if (this.resultArr.length % 2 == 0) {
        let index = this.resultArr.length / 2
        randomArr = [index - 2, index - 1, index, index + 1]
      } else {
        let index = Math.floor(this.resultArr.length / 2)
        randomArr = [index - 2, index - 1, index, index + 1, index + 2]
      }
      return randomArr
    },
    getResultBox() {
      this.isShowNum = true
      this.numLeft = this.randomBoxArr[Math.floor(Math.random().toFixed(1) * (this.randomBoxArr.length - 1))]
      console.log('方块出现的位置-----', this.numLeft)
      this.resultIndex = Math.floor(Math.random().toFixed(1) * (this.resultArr.length - 1))
      console.log('随机方块的值-----', this.resultIndex, this.resultArr[this.resultIndex])
      // console.log('RRRRRRRRRR', this.resultIndex, this.resultArr[this.resultIndex])
      // this.numLeft = Math.floor(Math.random().toFixed(1) * (this.resultIndex - 1))
      // console.log('getResultBox-------随机方块', this.numLeft)
      // console.log('this.numLeft-------', this.numLeft)
      this.numObj = setInterval(item => {
        // console.log('this.numTop-------', this.numTop)
        this.numTop++
        // console.log('this.numTop-------', this.numTop)
        // console.log('---------------------------')
      }, 1000)

    },
    // 给结果添加移入事件
    getResult(num) {
      // console.log('EEEEEE', num)
    },
    // 暂停
    stopChange() {
      console.log('停止-------',)
      if (this.numObj) {
        clearInterval(this.numObj)
        this.numObj = null
      }
    },
    // 向左移动
    leftChange() {
      if (this.numLeft == 0) return
      console.log('向左移动-------', this.numLeft)
      this.numLeft = this.numLeft - 1
    },
    // 向右移动
    rightChange() {
      if (this.numLeft == this.row - 1) return
      console.log('向右移动-------', this.row, this.numLeft)
      this.numLeft = this.numLeft + 1
    }
  }

}
</script>

<style scoped>
.chessBox {
  width: 1200px;
  height: 700px;
  border: 1px solid #666;
  position: relative;
}

.canvas {
  background: #fee8c5;
  border-right: 1px solid #666;
}

.numBox {
  width: 50px;
  height: 50px;
  border-top: 1px solid red;
  /* border-right: 1px solid red; */
  background: rgb(255, 255, 255, 0.5);
  position: absolute;
  bottom: 0px;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
}

.randomNum {
  width: 50px;
  height: 50px;
  background: red;
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
}

.successBox {
  width: 300px;
  height: 600x;
  border: 1px solid #ddd;
  position: absolute;
  top: 50px;
  right: 50px;
  font-size: 20px;
}

.item {
  width: 100%;
  height: 100px;
  border: 1px solid #ddd;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.item:nth-child(1) {
  display: flex;
  /* flex-direction: column; */
  justify-content: space-around;
  align-items: center;
}

.item:nth-child(4) > .rightBox {
  width: 100px;
  height: 50px;
  /* background-size: 100%, 100%;
  background-image: url('@/components/game/tetris/images/error.png');
  background-repeat: no-repeat; */
  font-size: 20px;
  color: green;
  line-height: 50px;
  text-align: center;
}

.item:nth-child(4) > .rightNum {
  width: 50px;
  height: 50px;
  font-size: 20px;
  color: green;
  line-height: 50px;
  text-align: center;
}

.item:nth-child(5) > .errorBox {
  width: 100px;
  height: 50px;
  /* background-size: 100%, 100%;
  background-image: url('@/components/game/tetris/images/error.png');
  background-repeat: no-repeat; */
  font-size: 20px;
  color: red;
  line-height: 50px;
  text-align: center;
}

.item:nth-child(5) > .errorNum {
  width: 50px;
  height: 50px;
  font-size: 20px;
  color: red;
  line-height: 50px;
  text-align: center;
}
.overDiv {
  width: 700px;
  height: 700px;
  background: rgba(102, 102, 102, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  font-size: 60px;
  color: red;
  line-height: 300px;
  text-align: center;
}
</style>